<script setup>
import { ref } from "vue"

const img = ref("/images/basketball.png")
const changeimg = () => {
  if (img.value === "/images/basketball.png") {
    img.value = "/images/kun.png"
  } else {
    img.value = "/images/basketball.png"
  }

}

const attrs = {
  id:"box1",
  class:"hello"
}
</script>
<template>
  <!-- 
          当我们需要为标签动态的设置属性时，需要用到v-bind指令
            v-bind可以简写为 :
          当我们为一个布尔值设置属性的时候，
            如果值为true，则元素上有该属性（转换为true也算true）
            如果值为false，则元素上有该属性（转换为false也算false）
            特殊情况："" 空串 在这里会当成true
       -->
    <img v-bind:src="img" alt="basketball">
    <button @click="changeimg">换照片</button>
    <br>
    <div v-bind="attrs"></div>
</template>